<template>
  <div class="recoverQues">
    <yd-navbar :title="title">
       <router-link to="/recoverIndex" slot="left">
            <yd-navbar-back-icon></yd-navbar-back-icon>
        </router-link>
    </yd-navbar>
    <div class="quesBox">
      <yd-cell-group :id="index" :title="ques.title" v-for="(ques,index) in quesList" :key="index">
        <yd-cell-item type="radio" v-for="option in ques.options">
            <span slot="left">{{option.title}}</span>
            <input slot="right" :name="ques.title" type="radio" value="true" v-model="option.checked"/>
        </yd-cell-item>
      </yd-cell-group>
    </div>
    
    <div style="margin: 0 .2rem">
      <yd-button size="large" type="primary" @click.native="handleClick">我要询价</yd-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'recoverIndex',
  data () {
    return {
      title:"手机回收-iphone6",
      quesList: [
        {title: "选项标题1", options: [{title:"选项标题1"},{title:"选项标题2"},{title:"选项标题3"}]},
        {title: "选项标题2", options: [{title:"选项标题1"},{title:"选项标题2"},{title:"选项标题3"}]},
        {title: "选项标题3", options: [{title:"选项标题1"},{title:"选项标题2"},{title:"选项标题3"}]},
        {title: "选项标题4", options: [{title:"选项标题1"},{title:"选项标题2"},{title:"选项标题3"}]}
      ]
    }
  },
  methods:{
    handleClick: function(){
      var checked = false;
      for(let val of this.quesList){
        for(let ov of val.options){
          if(ov.checked){
            checked = true;
            break;
          } 
        }
        if(!checked){
          this.$dialog.toast({
            mes: '请选完“'+val.title+'”选项！',
            icon: 'error',
            callback: () => {
                            
            }
          });
          break;
        }
      }

      if(!checked){
        return;
      }

      this.$router.push("/recoverResult");
    }
  }

}
</script>
<style scoped>
.recoverIndex .btn-primary{
  font-size: .26rem;
  height: .6rem;
  margin-top: 0.1rem;
}
</style>
